<template>
    <div class="post-comment">
      <van-field
        class="post-field"
        v-model.trim="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="优质评论将会被优先展示"
        show-word-limit
      />
      <van-button
        class="post-btn"
        size="small"
        @click="onAddComment"
      >发布</van-button>
    </div>
  </template>

<script>
import { addCommentAPI } from '../../../api/index.js'
export default {
  name: 'CommentPost',
  data () {
    return {
      message: ''
    }
  },
  props: {
    targetId: {
      type: String,
      default: ''
    },
    artId: {
      type: String,
      default: null
    }
  },
  methods: {
    // 发布评论
    async onAddComment () {
      try {
        // 1.判空验证
        if (!this.message.trim().length) return

        // 2.请求添加接口
        const { data: res } = await addCommentAPI({
          target: this.targetId,
          content: this.message,
          art_id: this.artId
        })
        console.log(res)
        // 3.清空输入框
        this.message = ''

        // 4.发布成功后，关闭弹窗
        this.$emit('postSuccess', res.data.new_obj)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

  <style scoped lang="less">
  .post-comment {
    display: flex;
    align-items: center;
    padding: 16px 0 16px 16px;
    .post-field {
      background-color: #f5f7f9;
    }
    .post-btn {
      width: 75px;
      border: none;
      padding: 0;
      color: #6ba3d8;
      &::before {
        display: none;
      }
    }
  }
  </style>
